<template>
  <RouterLink to="/body">
    <img src="https://wyh-777.oss-cn-nanjing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720230522140608.jpg"
      style="width: 200px;top: 10PX;">
  </RouterLink>
  <div style="height: 150px;text-align: center;left: 20px;top: 20px;">

    <!-- 诗句打印 -->
    <div class="blog-intro2" style="line-height: 40px;">
      {{ obj.output }} <span class="typed-cursor">|</span>
    </div>
  </div>
  <!-- 轮播图 -->
  <div>
    <a-carousel :style="{
      width: '700px',
      height: '240px',
      left: '20px'
    }" :auto-play="true" indicator-type="dot" show-arrow="hover">
      <a-carousel-item v-for="image in images">
        <img :src="image" :style="{
          width: '100%',
        }" />
      </a-carousel-item>
    </a-carousel>
  </div>
  <!-- 输入框 -->
  <div class="demo-register" style="left:350px;top: -220px;">
    <Login ref="form" @on-submit="handleSubmit">
      <Mobile name="mobile" />
      <Poptip trigger="focus" placement="right" width="240">
        <Password name="password" :rules="passwordRule" placeholder="至少6位密码，区分大小写" @on-change="handleChangePassword" />
        <template #content>
          <div class="demo-register-tip">
            <div class="demo-register-tip-title" :class="passwordTip.class">
              强度：{{ passwordTip.strong }}
            </div>
            <Progress :percent="passwordTip.percent" hide-info :stroke-width="6" :stroke-color="passwordTip.color" />
            <div class="demo-register-tip-desc">
              请至少输入 6 个字符。请不要使用容易被猜到的密码。
            </div>
          </div>
        </template>
      </Poptip>
      <div class="emo-login">
        <!-- 验证码 -->
        <Captcha name="captcha" :field="['mobile']" @on-get-captcha="handleGetCaptcha" />
      </div>
      <Submit>注册</Submit>
      <a @click="submit" style="left:340px;color:#2d8cf0; top:10px;font-size: 16px;">返回登录</a>
    </Login>
  </div>
  <div class="bottom">
    <GlobalFooter :links="links" :copyright="copyright" />
  </div>
</template>
<script>
import axios from 'axios'
import EasyTyper from "easy-typer-js";
export default {
  /* 加载前执行 */
  created() {
    this.init();
    this.timer = setInterval(this.runTime, 1000);
  },
  data() {
    return {
      passwordRule: [
        {
          required: true, message: '密码不能为空！', trigger: 'change'
        },
        {
          min: 6, message: '密码不能少于6位！', trigger: 'change'
        }
      ],
      passwordConfirmRule: [
        {
          required: true, message: '确认密码不能为空！', trigger: 'change'
        },

      ],
      // 密码长度，在密码强度提示时作为判断依据
      passwordLen: 0,

      code: '',
      /* 诗句打印 */
      tip: false,
      time: "",
      obj: {
        output: "",
        isEnd: false,
        speed: 300,
        singleBack: false,
        sleep: 0,
        type: "rollback",
        backSpeed: 40,
        sentencePause: true
      },
      articleList: [],
      blogInfo: {},
      current: 1,
      /* 底部导航 */
      copyright: "Copyright © 2023  只因商城",
      images: [
        'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',
        'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',
        'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',
      ],
    }
  },
  computed: {
    // 密码强度提示文案等
    passwordTip() {
      let strong = '强';
      let className = 'strong';
      let percent = this.passwordLen > 10 ? 10 : this.passwordLen;
      let color = '#19be6b';

      if (this.passwordLen < 6) {
        strong = '太短';
        className = 'low';
        color = '#ed4014';
      } else if (this.passwordLen < 10) {
        strong = '中';
        className = 'medium';
        color = '#ff9900';
      }

      return {
        strong,
        class: 'demo-register-tip-' + this.passwordLen < 6 ? 'low' : (this.passwordLen < 10 ? 'medium' : 'strong'),
        percent: percent * 10,
        color,
      }
    }
  },
  methods: {
    handleChangePassword(val) {
      this.passwordLen = val.length;
    },
    /* 发送邮件 */
    handleGetCaptcha(valid, { mobile }) {
      axios.post('http://localhost:8080/user/searchMobile', { "account": mobile }).then(resp => {
        if (resp.data == false) {
          axios.post('http://localhost:8080/user/mobile', { "account": mobile }).then(resp => {
            console.log(mobile);
            console.log(resp.data);
            this.code = resp.data
          })
        } else {
          this.$Message.error('用户已存在');
        }
      })
    },
    /* 注册 */
    handleSubmit(valid, { mobile, password, captcha }) {
      if (valid) {
        axios.post('http://localhost:8080/user/searchMobile', { "account": mobile }).then(resp => {
          console.log(resp.data);
          if (resp.data == false) {
            if (this.code == captcha) {
              axios.post('http://localhost:8080/user/register', { "account": mobile, "password": password }).then(resp => {
                if (resp.data) {
                  this.$Message.success('注册成功,即将跳转到登陆页面');
                  setTimeout(() => {
                    this.$router.push('/login')
                  }, 2000);
                } else {
                  this.$Message.error('注册失败');
                }

              })
            } else {
              this.$Message.error('验证码错误，请重新输入');
            }
          } else {
            this.$Message.error('用户已存在');
          }
        })
      }
    },
    /* 诗句打印 */
    init() {
      // 一言Api进行打字机循环输出效果
      fetch("https://v1.hitokoto.cn?c=i")
        .then(res => {
          return res.json();
        })
        .then(({ hitokoto }) => {
          this.initTyped(hitokoto);
        });
    },
    initTyped(input, fn, hooks) {
      const obj = this.obj;
      // eslint-disable-next-line no-unused-vars
      const typed = new EasyTyper(obj, input, fn, hooks);
    },
    scrollDown() {
      window.scrollTo({
        behavior: "smooth",
        top: document.documentElement.clientHeight
      });
    },
    submit() {
      this.$router.push('/login')
    }
  }

}

</script>
<!-- 诗句打印样式 -->
<style lang="stylus">
.typed-cursor
  opacity: 1
  animation: blink 0.7s infinite
@keyframes blink
  0%
    opacity: 1
  50%
    opacity: 0
  100%
    opacity: 1
</style>
<style>
.bottom {
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 1200px;
}

.blog-intro2 {
  font-size: 1.5rem;
}

.demo-register {
  width: 400px;
  margin: 0 auto !important;
}

.demo-register .ivu-poptip,
.demo-register .ivu-poptip-rel {
  display: block;
}

.demo-register-tip {
  text-align: left;
}

.demo-register-tip-low {
  color: #ed4014;
}

.demo-register-tip-medium {
  color: #ff9900;
}

.demo-register-tip-strong {
  color: #19be6b;
}

.demo-register-tip-title {
  font-size: 14px;
}

.demo-register-tip-desc {
  white-space: initial;
  font-size: 14px;
  margin-top: 6px;
}
</style>
